<template>
  <!-- 第一张内容页-未支付状态        -->
  <view
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
    class="all-container"
  >
    <view class="unpay-container">
      <view class="fillObj"></view>
      <text class="unpayedShowContent">{{ diagnoseContent }}</text>
      <view class="deblocking-box" @click="handleUnlock">
        <text>点击解锁</text>
        <text>剩余解锁次数：{{ unLockNum }}</text>
      </view>
    </view>

    <!-- <view class="unpay-container">
          <text
            decode="true"
            class="unpayedShowContent"
            v-for="(item, index) in showList"
            :key="index"
            >{{ item }}</text
          >
        </view> -->

    <image class="watch-person-box" />

    <image class="big-circle-box" />
    <image class="small-circle-box" />

    <!--      底部提示区域  -->
    <view class="bottom-container">
      <span
        class="bottom-container-content"
        v-for="(item, index) in diagnoseDescArr"
        :key="index"
        >{{ item }}</span
      >
    </view>

    <image class="slide-up-img" @click="changePage" />
  </view>
</template>

<script>
import resumeUtils from "@/mixins/resumeUtils.js";
export default {
  mixins: [resumeUtils],
  props: {
    pageIndex: {
      type: Number,
      default: 0,
    },

    itemObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      screenHeight: 0,
      screenWidth: 0,
      diagnoseDescArr: [],
      contentList: [],
      showList: [],
      diagnoseContent: "",
      unLockNum: 0, // 剩余解锁次数
    };
  },
  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
    this.screenWidth = systemInfo.windowWidth;
  },
  watch: {
    itemObj: {
      handler(val) {
        if (val.diagnoseDesc) {
          // 分割处理
          this.diagnoseDescArr = val.diagnoseDesc.split("|");
        }
        if (val.contentList) {
          this.contentList = val.contentList;
        }
        if (val.diagnoseContent) {
          this.diagnoseContent = val.diagnoseContent;
          this.showList = this.handleUnpayedContent(this.diagnoseContent);
        }
        this.unLockNum = val.unLockNum;
      },

      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },
  },

  methods: {
    changePage() {
      this.$emit("setCurrentPage", this.pageIndex + 2);
    },

    handleUnlock() {
      // 点击解锁
      this.$emit("clickUnlock", {});
    },
  },
};
</script>
<style  lang="scss" scoped>
.all-container {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-image: url($img-base + "career/diagnosis/judge_result_item_bg.png");

  display: flex;
  flex-direction: column;
  align-items: center;

  .unpay-container {
    display: flex;
    flex-direction: column;

    width: 40%;
    height: 650rpx;
    margin-left: -10%;

    .fillObj {
      flex: 1;
    }
    .unpayedShowContent {
      color: transparent;
      font-size: 28rpx;

      transform: skew(6deg, -8deg);
      font-style: italic;

      background-image: linear-gradient(
        #aeffe2,
        #aeffe2,
        #aeffe2,
        #aeffe2,
        #aeffe2,
        #aeffe2,
        #aeffe2,
        #ff000000
      );
      background-clip: text;
      text-overflow: ellipsis;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      /*设置省略号在容器第四行文本后*/
      -webkit-line-clamp: 12;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .deblocking-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    color: rgb(224, 248, 241);
    transform: skew(2deg, -12deg);
    font-style: italic;
    font-size: 28rpx;
  }

  .watch-person-box {
    position: fixed;
    top: 45%;
    left: 54%;
    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_person.png");
    width: 150rpx;
    height: 160rpx;
    animation-name: personMove;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  .big-circle-box {
    width: 100%;
    position: fixed;
    top: 47%;
    left: 32%;
    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_bg_point.png");
    width: 20rpx;
    height: 20rpx;
    animation-name: personMove;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }

  .small-circle-box {
    width: 100%;
    position: fixed;
    top: 50%;
    left: 45%;

    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_bg_point.png");
    width: 13rpx;
    height: 13rpx;
    animation-name: personMove;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }

  .bottom-container {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    position: fixed;
    bottom: 13%;
    left: 12%;
    right: 12%;

    .bottom-container-content {
      color: white;
      width: 100%;
      font-size: 28rpx;
      line-height: 60rpx;
    }
  }

  .slide-up-img {
    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_down_arr.png");
    width: 50rpx;
    height: 50rpx;
    position: fixed;
    bottom: 5%;
  }
}

@keyframes personMove {
  0% {
    transform: translateY(0rpx);
  }
  50% {
    transform: translateY(-10rpx);
  }
  100% {
    transform: translateY(0rpx);
  }
}
</style>